<!DOCTYPE html>
<html>
<head>
    <title>Flat Admin V.2 - Free Bootstrap Admin Templates</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <frame-options policy="SAMEORIGIN" />
    <#scripts />
</head>

<body class="flat-blue">
	<div class="row content" id="main">
       <div class="col-xs-12 content">
           <div class="card">
               <div class="card-header">
                   <div class="card-title">
                       <div class="title">请填写角色基本信息</div>
                   </div>
               </div>
               <div class="card-body">
                   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                   	  <input type="hidden" id="id" value="${id!''}">
					  <el-form-item label="角色名称" prop="name">
					    <el-input v-model="ruleForm.name"></el-input>
					  </el-form-item>
					  <el-form-item label="排序" prop="sort">
					    <el-input-number v-model="ruleForm.sort" :min="0" :max="9999" ></el-input-number>
					  </el-form-item>
					  <el-form-item label="备注" prop="tips">
					    <el-input v-model="ruleForm.tips"></el-input>
					  </el-form-item>
					  <el-form-item>
					    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
					    <el-button @click="resetForm('ruleForm')">重置</el-button>
					    <el-button @click="cancel" type="danger">取消</el-button>
					  </el-form-item>
					</el-form>
               </div>
           </div>
       </div>
   </div>
   <script type="text/javascript">
   var vm = new Vue({
	    el: '#main',
	    data: {
	    	ruleForm: {
	    		id:"",
	    		name:"",
	    		sort:"",
	    		tips:""
	        },
	        rules: {
	            name: [
	              { required: true, message: '请输入角色名称', trigger: 'blur' },
	              { max: 10, message: '长度在不能超过 10 个字符', trigger: 'blur' }
	            ],
		        tips: [
		        	{ max: 50, message: '长度在不能超过 50 个字符', trigger: 'blur' }
		        ]
	        }
	    },
	    methods: {
	    	submitForm(formName) {
	        	this.$refs[formName].validate((valid) => {
	            	if (valid) {
	            		axios.post('/role/edit', vm.getParams()).then(function (response) {
	    	            	var data = response.data;
	    	            	if(data.code==200){
	    	            		parent.vm.onload();
	     	            		parent.layer.closeAll();
	    	            	}
	    	        	}).catch(function (error) {
	    	                layer.msg(error);
	    	       		});
	              	} else {
	                	return false;
	              	}
	        	});
	        },
          	resetForm(formName) {
            	this.$refs[formName].resetFields();
            	vm.onload();
          	},
	    	cancel:function(){
	    		parent.layer.closeAll();
	    	},
	        onload:function(){
	        	axios.get('/role/get/'+$("#id").val()).then(function (response) {
	            	var data = response.data;
	            	if(data.code==200){
	            		vm.ruleForm = data.data;
	            	}
	        	}).catch(function (error) {
	                layer.msg("获取菜单信息失败");
	       		});
	        },
	        getParams:function(){
	        	var params = new URLSearchParams();
	        	params.append('id', vm.ruleForm.id);
	        	params.append('name', vm.ruleForm.name);
	        	params.append('sort', vm.ruleForm.sort);
	        	params.append('tips', vm.ruleForm.tips);
	        	return params;
	        }
	    }
	});
	vm.onload();
   </script>
</body>

</html>
